<template>
  <section class="todoapp">
    <header class="header">
      <h1>todos</h1>
      <input
        class="new-todo"
        v-model.trim="todoName"
        @keyup.enter="addTodo"
        placeholder="What needs to be done?"
        autofocus
      />
    </header>

    <section class="main">
      <input id="toggle-all" v-model="isCheckAll" class="toggle-all" type="checkbox" />
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list">
        <li
          :class="{ completed: item.flag }"
          v-for="item in list"
          :key="item.id"
        >
          <div class="view">
            <input class="toggle" type="checkbox" v-model="item.flag" />
            <label>{{ item.name }}</label>
            <button class="destroy" @click="delBtn(item.id)"></button>
          </div>
          <input class="edit" value="Create a TodoMVC template" />
        </li>
      </ul>
    </section>

    <footer class="footer">
      <span class="todo-count"
        ><strong>{{ leftCount }}</strong> 项未完成</span
      >
      <ul class="filters">
        <li>
          <a class="selected" href="#/">All</a>
        </li>
        <li>
          <a href="#/active">Active</a>
        </li>
        <li>
          <a href="#/completed">Completed</a>
        </li>
      </ul>
      <button class="clear-completed">Clear completed</button>
    </footer>
  </section>
</template>

<script>
  import { computed, reactive, toRefs, watch } from "vue";
  export default {
    name: "App",
    setup() {
      // 定义响应式数据
      const state = reactive({
        // 优先读取本地存储的列表，如果没有则初始化后面的数组
        list: JSON.parse(localStorage.getItem('todoList')) || [
          { id: 1, name: "吃饭", flag: true },
          { id: 2, name: "睡觉", flag: false },
          { id: 3, name: "打代码", flag: false },
        ],
        todoName: "",
      });

      // 删除功能
      const delBtn = (id) => {
        // 把需要删除的数据通过 filter 过滤掉即可
        state.list = state.list.filter((item) => item.id !== id);
      };

      // 添加功能
      const addTodo = () => {
        // 空判断
        if (!state.todoName) return alert("请输入内容");
        // 添加的 todo 对象，name 为输入框的值
        const obj = { id: state.list.length + 1, name: state.todoName, flag: false, }; 
        // 前添加
        state.list = [obj, ...state.list];
        // 情况输入框
        state.todoName = "";
      };

      // 左边未完成的数量计算
      const leftCount = computed(() => {
        return state.list.filter((item) => item.flag === false).length;
      });

      // 全选按钮的计算 - 双向绑定需要用 get set 写法
      const isCheckAll = computed({
        // 计算是否全选
        get: () => {
          return state.list.every((item) => item.flag === true);
        },
        // 设置列表每一项数据的值
        set: (val) => {
          state.list.forEach(item=> item.flag = val)
        },
      });

      // 监听列表 - 💥注意：需要深度监听
      watch(()=>state.list, () => {
        // 当列表发生变化时，同步到本地存储
        localStorage.setItem('todoList', JSON.stringify(state.list))
      },{deep:true})  // { deep: true } 深度监听

      // 返回给模板使用的响应式数据和事件处理函数
      return { ...toRefs(state), delBtn, addTodo, leftCount, isCheckAll };
    },
  };
</script>
